import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { FormattedMessage, injectIntl } from 'react-intl';
import { TextField, Row, Col, Button, Select, ButtonGroup } from '@folio/stripes/components';
import {  IfPermission } from '@folio/stripes/core';
class SearchForm extends Component {
    static propTypes = {
      handleSubmit: PropTypes.func.isRequired,
      initialValues: PropTypes.object,
      dictionary: PropTypes.object,
      cleanSearch: PropTypes.func,
      intl: PropTypes.func,
      add:PropTypes.func
    };

    fieldChange = () => {
      const { handleSubmit } = this.props;
      this.setState(() => {
        handleSubmit();
      });
    };

    render() {
      const {
        handleSubmit,
        add,
          intl
      } = this.props;

      return (

        <form data-test-form-page id="form-search" onSubmit={handleSubmit}>
          <Row style={{ width: '100%' }}>
            <Col xs={2}>
              <Field
                component={TextField}
                name="name"
                placeholder={intl.formatMessage({ id: 'ui-party.loans.columns.source.name' })}

              />
            </Col>
            <Col xs={2}>
              <Field
                component={Select}
                name="typeName"

                dataOptions={[
                  {
                    id: '0',
                    value: '',
                    label:  intl.formatMessage({ id: 'ui-party.loans.columns.source.type' })
                  },
                  {
                    id: '1',
                    value: '1',
                    label: intl.formatMessage({ id: 'ui-party.loans.columns.source.venue' })
                  },
                  {
                    id: '2',
                    value: '2',
                    label: intl.formatMessage({ id: 'ui-party.loans.columns.source.device' })
                  }
                ]}
              />
            </Col>
            <Col xs={2}>
              <Field
                component={Select}
                name="state"

                dataOptions={[
                  {
                    id: '0',
                    value: '',
                    label: intl.formatMessage({ id: 'ui-party.loans.columns.source.state' })
                  },
                  {
                    id: '1',
                    value: '1',
                    label: intl.formatMessage({ id: 'ui-party.loans.columns.party.effective' })
                  },
                  {
                    id: '2',
                    value: '0',
                    label: intl.formatMessage({ id: 'ui-party.loans.columns.party.noneffective' })
                  }
                ]}
              />
            </Col>
            <Col xs={3}>
              <ButtonGroup>
                <Button type="submit">
                  <FormattedMessage id="ui-party.search" />
                </Button>
                  <IfPermission perm={"ui-party.auxiliary.manage.view.add"}>
                      <Button onClick={() => { add(); }}>
                          <FormattedMessage
                              id="ui-party.add"
                          />
                      </Button>
                  </IfPermission>
             </ButtonGroup>
            </Col>
          </Row>
        </form>

      );
    }
}

export default injectIntl(
  reduxForm({
    form: 'equipmentSearchFrom' + new Date().getTime(),
    navigationCheck: true,
    enableReinitialize: true
  })(SearchForm)
);
